<template>
  <div class="case-analysis">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>案例分析</h1>
      <p>通过真实案例学习防范诈骗技巧</p>
    </div>

    <!-- 筛选和搜索 -->
    <div class="filter-section">
      <div class="filter-controls">
        <div class="category-filter">
          <label>案例类型：</label>
          <select v-model="selectedCategory" @change="filterCases">
            <option value="">全部类型</option>
            <option value="telecom">电信诈骗</option>
            <option value="online">网络诈骗</option>
            <option value="financial">金融诈骗</option>
            <option value="identity">身份冒充</option>
            <option value="romance">情感诈骗</option>
            <option value="investment">投资诈骗</option>
          </select>
        </div>
        
        <div class="risk-filter">
          <label>风险等级：</label>
          <select v-model="selectedRisk" @change="filterCases">
            <option value="">全部等级</option>
            <option value="high">高风险</option>
            <option value="medium">中风险</option>
            <option value="low">低风险</option>
          </select>
        </div>
        
        <div class="search-box">
          <input 
            v-model="searchQuery" 
            @input="filterCases"
            placeholder="搜索案例关键词..."
            class="search-input"
          />
          <button class="search-btn">🔍</button>
        </div>
      </div>
    </div>

    <!-- 案例统计 -->
    <div class="statistics-section">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">📊</div>
          <div class="stat-content">
            <h3>{{ totalCases }}</h3>
            <p>总案例数</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">⚠️</div>
          <div class="stat-content">
            <h3>{{ highRiskCases }}</h3>
            <p>高风险案例</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">💰</div>
          <div class="stat-content">
            <h3>{{ avgLoss }}</h3>
            <p>平均损失</p>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon">📈</div>
          <div class="stat-content">
            <h3>{{ successRate }}%</h3>
            <p>防范成功率</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 案例分析图表 -->
    <div class="charts-section">
      <div class="chart-container">
        <h3>案例类型分布</h3>
        <canvas ref="typeChart" width="400" height="300"></canvas>
      </div>
      
      <div class="chart-container">
        <h3>月度案例趋势</h3>
        <canvas ref="trendChart" width="400" height="300"></canvas>
      </div>
    </div>

    <!-- 案例列表 -->
    <div class="cases-section">
      <h3>典型案例</h3>
      <div class="cases-grid">
        <div 
          v-for="case_ in filteredCases" 
          :key="case_.id"
          class="case-card"
          @click="selectCase(case_)"
        >
          <div class="case-header">
            <span class="case-type">{{ getCaseTypeLabel(case_.type) }}</span>
            <span class="risk-level" :class="case_.riskLevel">
              {{ getRiskLevelLabel(case_.riskLevel) }}
            </span>
          </div>
          
          <h4>{{ case_.title }}</h4>
          <p class="case-summary">{{ case_.summary }}</p>
          
          <div class="case-details">
            <div class="detail-item">
              <span class="label">损失金额：</span>
              <span class="value">{{ case_.lossAmount }}</span>
            </div>
            <div class="detail-item">
              <span class="label">发生时间：</span>
              <span class="value">{{ case_.date }}</span>
            </div>
            <div class="detail-item">
              <span class="label">受害者：</span>
              <span class="value">{{ case_.victimProfile }}</span>
            </div>
          </div>
          
          <div class="case-actions">
            <button class="detail-btn">查看详情</button>
            <button class="learn-btn">学习防范</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 案例详情模态框 -->
    <div v-if="selectedCase" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2>{{ selectedCase.title }}</h2>
          <button class="close-btn" @click="closeModal">×</button>
        </div>
        
        <div class="modal-body">
          <div class="case-info">
            <div class="info-grid">
              <div class="info-item">
                <label>案例类型：</label>
                <span>{{ getCaseTypeLabel(selectedCase.type) }}</span>
              </div>
              <div class="info-item">
                <label>风险等级：</label>
                <span class="risk-level" :class="selectedCase.riskLevel">
                  {{ getRiskLevelLabel(selectedCase.riskLevel) }}
                </span>
              </div>
              <div class="info-item">
                <label>损失金额：</label>
                <span>{{ selectedCase.lossAmount }}</span>
              </div>
              <div class="info-item">
                <label>发生时间：</label>
                <span>{{ selectedCase.date }}</span>
              </div>
              <div class="info-item">
                <label>受害者：</label>
                <span>{{ selectedCase.victimProfile }}</span>
              </div>
              <div class="info-item">
                <label>地区：</label>
                <span>{{ selectedCase.location }}</span>
              </div>
            </div>
          </div>
          
          <div class="case-timeline">
            <h3>案例经过</h3>
            <div class="timeline">
              <div 
                v-for="(step, index) in selectedCase.timeline" 
                :key="index"
                class="timeline-item"
              >
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                  <div class="timeline-time">{{ step.time }}</div>
                  <div class="timeline-desc">{{ step.description }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="case-analysis">
            <h3>案例分析</h3>
            <div class="analysis-content">
              <div class="analysis-section">
                <h4>诈骗手法分析</h4>
                <ul>
                  <li v-for="method in selectedCase.methods" :key="method">
                    {{ method }}
                  </li>
                </ul>
              </div>
              
              <div class="analysis-section">
                <h4>受害者心理分析</h4>
                <p>{{ selectedCase.psychologyAnalysis }}</p>
              </div>
              
              <div class="analysis-section">
                <h4>关键警示信号</h4>
                <ul>
                  <li v-for="signal in selectedCase.warningSignals" :key="signal">
                    {{ signal }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <div class="prevention-measures">
            <h3>防范措施</h3>
            <div class="measures-grid">
              <div 
                v-for="measure in selectedCase.preventionMeasures" 
                :key="measure.title"
                class="measure-card"
              >
                <div class="measure-icon">{{ measure.icon }}</div>
                <div class="measure-content">
                  <h4>{{ measure.title }}</h4>
                  <p>{{ measure.description }}</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="related-cases">
            <h3>相关案例</h3>
            <div class="related-grid">
              <div 
                v-for="related in getRelatedCases(selectedCase)" 
                :key="related.id"
                class="related-card"
                @click="selectCase(related)"
              >
                <h4>{{ related.title }}</h4>
                <p>{{ related.summary }}</p>
                <span class="related-type">{{ getCaseTypeLabel(related.type) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const selectedCategory = ref('')
const selectedRisk = ref('')
const searchQuery = ref('')
const selectedCase = ref(null)

// 图表引用
const typeChart = ref(null)
const trendChart = ref(null)

// 模拟案例数据
const cases = ref([
  {
    id: 1,
    title: "虚假投资平台诈骗案",
    type: "investment",
    riskLevel: "high",
    summary: "受害者通过社交媒体广告投资虚假理财平台，损失20万元",
    lossAmount: "20万元",
    date: "2024-01-15",
    victimProfile: "中年白领，45岁",
    location: "北京市",
    timeline: [
      { time: "2024-01-10", description: "受害者在朋友圈看到投资广告" },
      { time: "2024-01-12", description: "添加客服微信，了解投资详情" },
      { time: "2024-01-13", description: "小额投资试水，成功提现" },
      { time: "2024-01-15", description: "加大投资，平台突然无法提现" },
      { time: "2024-01-16", description: "发现被骗，报警处理" }
    ],
    methods: [
      "利用社交媒体投放虚假广告",
      "伪造高收益投资项目",
      "小额返利建立信任",
      "诱导大额投资后跑路"
    ],
    psychologyAnalysis: "利用受害者贪利心理，通过小额返利建立信任，然后诱导大额投资。",
    warningSignals: [
      "收益率明显高于正常投资",
      "平台资质不明确",
      "要求加微信私下操作",
      "催促快速决策"
    ],
    preventionMeasures: [
      { icon: "🔍", title: "平台资质验证", description: "投资前必须验证平台合法性和资质" },
      { icon: "📊", title: "收益合理性判断", description: "理性分析投资收益率是否合理" },
      { icon: "👥", title: "多方咨询", description: "投资前咨询专业人士或家人意见" },
      { icon: "⚠️", title: "小额测试", description: "即使投资也要小额测试，观察一段时间" }
    ]
  },
  {
    id: 2,
    title: "冒充公检法电信诈骗",
    type: "telecom",
    riskLevel: "high",
    summary: "诈骗分子冒充警察，声称受害者涉嫌洗钱，骗取15万元",
    lossAmount: "15万元",
    date: "2024-01-20",
    victimProfile: "退休教师，62岁",
    location: "上海市",
    timeline: [
      { time: "2024-01-20 09:00", description: "接到自称警察的电话" },
      { time: "2024-01-20 10:30", description: "被告知涉嫌洗钱案件" },
      { time: "2024-01-20 14:00", description: "要求转账证明清白" },
      { time: "2024-01-20 15:30", description: "转账15万元到指定账户" },
      { time: "2024-01-20 18:00", description: "家人发现被骗，报警" }
    ],
    methods: [
      "冒充公检法权威身份",
      "制造恐慌情绪",
      "要求保密配合调查",
      "诱导转账证明清白"
    ],
    psychologyAnalysis: "利用受害者对权威的敬畏心理，通过恐吓手段制造紧张情绪，迫使其做出错误决定。",
    warningSignals: [
      "电话中要求转账",
      "声称案件保密",
      "催促立即行动",
      "不允许与家人商量"
    ],
    preventionMeasures: [
      { icon: "📞", title: "官方渠道核实", description: "接到类似电话立即挂断，通过官方渠道核实" },
      { icon: "👨‍👩‍👧‍👦", title: "家人商量", description: "重大决定前一定要与家人商量" },
      { icon: "🚫", title: "拒绝转账", description: "公检法绝不会电话要求转账" },
      { icon: "📱", title: "举报诈骗", description: "发现诈骗电话立即举报" }
    ]
  },
  {
    id: 3,
    title: "网络购物退款诈骗",
    type: "online",
    riskLevel: "medium",
    summary: "诈骗分子冒充客服以退款为由，骗取银行卡信息和验证码",
    lossAmount: "8千元",
    date: "2024-01-25",
    victimProfile: "大学生，22岁",
    location: "广州市",
    timeline: [
      { time: "2024-01-25 10:00", description: "接到自称客服的电话" },
      { time: "2024-01-25 10:15", description: "告知商品质量问题需要退款" },
      { time: "2024-01-25 10:30", description: "引导下载退款软件" },
      { time: "2024-01-25 11:00", description: "要求输入银行卡信息" },
      { time: "2024-01-25 11:15", description: "银行卡被盗刷8千元" }
    ],
    methods: [
      "冒充电商客服",
      "以退款为借口",
      "诱导下载恶意软件",
      "获取银行卡信息"
    ],
    psychologyAnalysis: "利用受害者对退款的期待心理，通过专业的客服话术建立信任。",
    warningSignals: [
      "主动来电办理退款",
      "要求下载不明软件",
      "索要银行卡信息",
      "要求提供验证码"
    ],
    preventionMeasures: [
      { icon: "🛒", title: "官方渠道退款", description: "退款只通过官方购物平台处理" },
      { icon: "🔒", title: "保护个人信息", description: "不向陌生人透露银行卡信息" },
      { icon: "📱", title: "谨慎下载软件", description: "不随意下载陌生人推荐的软件" },
      { icon: "🔐", title: "验证码保密", description: "验证码绝不能告诉他人" }
    ]
  },
  {
    id: 4,
    title: "网络交友投资诈骗",
    type: "romance",
    riskLevel: "high",
    summary: "诈骗分子通过网络交友建立感情，诱导投资虚假项目",
    lossAmount: "30万元",
    date: "2024-02-01",
    victimProfile: "单身女性，35岁",
    location: "深圳市",
    timeline: [
      { time: "2023-12-01", description: "在婚恋网站认识网友" },
      { time: "2023-12-15", description: "发展为网络恋人关系" },
      { time: "2024-01-10", description: "网友介绍投资项目" },
      { time: "2024-01-20", description: "开始小额投资并获利" },
      { time: "2024-02-01", description: "大额投资后发现被骗" }
    ],
    methods: [
      "网络交友建立感情",
      "长期培养信任关系",
      "介绍虚假投资项目",
      "小额返利后大额诈骗"
    ],
    psychologyAnalysis: "利用受害者对感情的渴望，通过长期交往建立深度信任，然后实施诈骗。",
    warningSignals: [
      "从不见面只网上交流",
      "经常提到投资赚钱",
      "要求转账投资",
      "投资平台不正规"
    ],
    preventionMeasures: [
      { icon: "💕", title: "理性交友", description: "网络交友要理性，不要被甜言蜜语迷惑" },
      { icon: "🤝", title: "见面确认", description: "发展深度关系前要求见面确认身份" },
      { icon: "💰", title: "拒绝金钱往来", description: "恋爱期间避免金钱往来" },
      { icon: "👥", title: "朋友建议", description: "重大决定前听取朋友建议" }
    ]
  },
  {
    id: 5,
    title: "虚假贷款诈骗案",
    type: "financial",
    riskLevel: "medium",
    summary: "诈骗分子以放贷为名，要求先交保证金，骗取5万元",
    lossAmount: "5万元",
    date: "2024-02-05",
    victimProfile: "小企业主，40岁",
    location: "成都市",
    timeline: [
      { time: "2024-02-01", description: "在网上看到贷款广告" },
      { time: "2024-02-02", description: "联系客服咨询贷款" },
      { time: "2024-02-03", description: "提交资料审核通过" },
      { time: "2024-02-05", description: "要求交保证金" },
      { time: "2024-02-05", description: "转账后无法联系" }
    ],
    methods: [
      "发布虚假贷款广告",
      "承诺无抵押快速放贷",
      "以保证金为名收费",
      "收钱后失联"
    ],
    psychologyAnalysis: "利用受害者急需资金的心理，通过承诺快速放贷建立信任。",
    warningSignals: [
      "放贷前要求费用",
      "承诺无抵押快速放贷",
      "利率明显过低",
      "公司资质不明"
    ],
    preventionMeasures: [
      { icon: "🏦", title: "正规渠道贷款", description: "只通过正规银行或金融机构贷款" },
      { icon: "📋", title: "验证资质", description: "核实贷款公司的营业执照和资质" },
      { icon: "💰", title: "拒绝先付费", description: "正规贷款不会要求先付费" },
      { icon: "🔍", title: "多方比较", description: "多比较几家正规机构" }
    ]
  }
])

// 计算属性
const totalCases = computed(() => cases.value.length)
const highRiskCases = computed(() => cases.value.filter(c => c.riskLevel === 'high').length)
const avgLoss = computed(() => {
  const total = cases.value.reduce((sum, c) => sum + parseFloat(c.lossAmount.replace(/[万千元]/g, '').replace(/[^\d.]/g, '')), 0)
  return `${(total / cases.value.length).toFixed(1)}万`
})
const successRate = computed(() => 85)

const filteredCases = computed(() => {
  let filtered = cases.value

  if (selectedCategory.value) {
    filtered = filtered.filter(c => c.type === selectedCategory.value)
  }

  if (selectedRisk.value) {
    filtered = filtered.filter(c => c.riskLevel === selectedRisk.value)
  }

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(c => 
      c.title.toLowerCase().includes(query) ||
      c.summary.toLowerCase().includes(query)
    )
  }

  return filtered
})

// 方法
const getCaseTypeLabel = (type) => {
  const labels = {
    telecom: '电信诈骗',
    online: '网络诈骗',
    financial: '金融诈骗',
    identity: '身份冒充',
    romance: '情感诈骗',
    investment: '投资诈骗'
  }
  return labels[type] || type
}

const getRiskLevelLabel = (level) => {
  const labels = {
    high: '高风险',
    medium: '中风险',
    low: '低风险'
  }
  return labels[level] || level
}

const filterCases = () => {
  // 过滤逻辑已在computed中实现
}

const selectCase = (case_) => {
  selectedCase.value = case_
}

const closeModal = () => {
  selectedCase.value = null
}

const getRelatedCases = (currentCase) => {
  return cases.value
    .filter(c => c.id !== currentCase.id && c.type === currentCase.type)
    .slice(0, 3)
}

// 绘制图表
const drawTypeChart = () => {
  const canvas = typeChart.value
  const ctx = canvas.getContext('2d')
  
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  // 数据统计
  const typeStats = {}
  cases.value.forEach(c => {
    typeStats[c.type] = (typeStats[c.type] || 0) + 1
  })
  
  // 绘制饼图
  const centerX = canvas.width / 2
  const centerY = canvas.height / 2
  const radius = Math.min(centerX, centerY) - 40
  
  const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD']
  const types = Object.keys(typeStats)
  const total = Object.values(typeStats).reduce((sum, val) => sum + val, 0)
  
  let currentAngle = 0
  
  types.forEach((type, index) => {
    const sliceAngle = (typeStats[type] / total) * 2 * Math.PI
    
    ctx.beginPath()
    ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle)
    ctx.lineTo(centerX, centerY)
    ctx.fillStyle = colors[index % colors.length]
    ctx.fill()
    
    // 标签
    const labelAngle = currentAngle + sliceAngle / 2
    const labelX = centerX + Math.cos(labelAngle) * (radius + 20)
    const labelY = centerY + Math.sin(labelAngle) * (radius + 20)
    
    ctx.fillStyle = '#333'
    ctx.font = '12px Arial'
    ctx.textAlign = 'center'
    ctx.fillText(getCaseTypeLabel(type), labelX, labelY)
    
    currentAngle += sliceAngle
  })
}

const drawTrendChart = () => {
  const canvas = trendChart.value
  const ctx = canvas.getContext('2d')
  
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  // 模拟月度数据
  const monthData = [12, 18, 15, 22, 28, 25, 30, 35, 32, 28, 24, 20]
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  
  const padding = 40
  const chartWidth = canvas.width - 2 * padding
  const chartHeight = canvas.height - 2 * padding
  
  // 绘制坐标轴
  ctx.strokeStyle = '#ddd'
  ctx.beginPath()
  ctx.moveTo(padding, padding)
  ctx.lineTo(padding, padding + chartHeight)
  ctx.lineTo(padding + chartWidth, padding + chartHeight)
  ctx.stroke()
  
  // 绘制折线
  ctx.strokeStyle = '#1e3c72'
  ctx.lineWidth = 2
  ctx.beginPath()
  
  const maxValue = Math.max(...monthData)
  const stepX = chartWidth / (monthData.length - 1)
  
  monthData.forEach((value, index) => {
    const x = padding + index * stepX
    const y = padding + chartHeight - (value / maxValue) * chartHeight
    
    if (index === 0) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
  })
  
  ctx.stroke()
  
  // 绘制数据点
  ctx.fillStyle = '#1e3c72'
  monthData.forEach((value, index) => {
    const x = padding + index * stepX
    const y = padding + chartHeight - (value / maxValue) * chartHeight
    
    ctx.beginPath()
    ctx.arc(x, y, 4, 0, 2 * Math.PI)
    ctx.fill()
  })
  
  // 绘制月份标签
  ctx.fillStyle = '#666'
  ctx.font = '12px Arial'
  ctx.textAlign = 'center'
  months.forEach((month, index) => {
    const x = padding + index * stepX
    ctx.fillText(month, x, padding + chartHeight + 20)
  })
}

// 生命周期
onMounted(() => {
  drawTypeChart()
  drawTrendChart()
})
</script>

<style scoped>
.case-analysis {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2.5em;
  color: #1e3c72;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 1.1em;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.filter-controls {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.category-filter, .risk-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-filter label, .risk-filter label {
  font-weight: 500;
  color: #333;
}

.category-filter select, .risk-filter select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 200px;
}

.search-btn {
  padding: 8px 12px;
  background: #1e3c72;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.statistics-section {
  margin-bottom: 30px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  font-size: 2em;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
}

.stat-content h3 {
  font-size: 1.8em;
  color: #1e3c72;
  margin: 0;
}

.stat-content p {
  color: #666;
  margin: 5px 0 0 0;
}

.charts-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.chart-container {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.chart-container h3 {
  text-align: center;
  color: #1e3c72;
  margin-bottom: 20px;
}

.cases-section {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.cases-section h3 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.case-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.3s ease;
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.case-type {
  background: #1e3c72;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.risk-level {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: 500;
}

.risk-level.high {
  background: #ffebee;
  color: #c62828;
}

.risk-level.medium {
  background: #fff3e0;
  color: #ef6c00;
}

.risk-level.low {
  background: #e8f5e8;
  color: #2e7d32;
}

.case-card h4 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.case-summary {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.case-details {
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  margin-bottom: 5px;
}

.detail-item .label {
  font-weight: 500;
  color: #333;
  width: 80px;
}

.detail-item .value {
  color: #666;
}

.case-actions {
  display: flex;
  gap: 10px;
}

.detail-btn, .learn-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.detail-btn {
  background: #1e3c72;
  color: white;
}

.detail-btn:hover {
  background: #2a4a8a;
}

.learn-btn {
  background: #f0f0f0;
  color: #333;
}

.learn-btn:hover {
  background: #e0e0e0;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  color: #1e3c72;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

.case-info {
  margin-bottom: 30px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-item label {
  font-weight: 500;
  color: #333;
}

.case-timeline {
  margin-bottom: 30px;
}

.case-timeline h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #1e3c72;
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
}

.timeline-dot {
  position: absolute;
  left: -24px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1e3c72;
}

.timeline-time {
  font-weight: 500;
  color: #1e3c72;
  margin-bottom: 5px;
}

.timeline-desc {
  color: #666;
  line-height: 1.5;
}

.case-analysis {
  margin-bottom: 30px;
}

.case-analysis h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.analysis-section {
  margin-bottom: 20px;
}

.analysis-section h4 {
  color: #333;
  margin-bottom: 10px;
}

.analysis-section ul {
  padding-left: 20px;
}

.analysis-section li {
  margin-bottom: 5px;
  color: #666;
}

.analysis-section p {
  color: #666;
  line-height: 1.6;
}

.prevention-measures {
  margin-bottom: 30px;
}

.prevention-measures h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.measures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.measure-card {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.measure-icon {
  font-size: 1.5em;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e3c72;
  border-radius: 50%;
}

.measure-content h4 {
  color: #1e3c72;
  margin: 0 0 5px 0;
}

.measure-content p {
  color: #666;
  margin: 0;
  font-size: 14px;
}

.related-cases {
  margin-bottom: 20px;
}

.related-cases h3 {
  color: #1e3c72;
  margin-bottom: 15px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.related-card {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.related-card:hover {
  background: #e9ecef;
}

.related-card h4 {
  color: #1e3c72;
  margin: 0 0 10px 0;
  font-size: 16px;
}

.related-card p {
  color: #666;
  margin: 0 0 10px 0;
  font-size: 14px;
}

.related-type {
  background: #1e3c72;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

@media (max-width: 768px) {
  .filter-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    margin-left: 0;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .charts-section {
    grid-template-columns: 1fr;
  }
  
  .cases-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    margin: 20px;
    max-width: none;
  }
}
</style> 